<template>
  <a-card :bordered="false" style="width: 100%;border-radius: 4px">
    <div class="searchForm">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item :label="`订单编号`">
              <a-input placeholder="请输入订单编号" v-model="form.ordNo" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`收货人姓名`">
              <a-input placeholder="请输入收货人姓名号" v-model="form.customName" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`收货人手机`">
              <a-input placeholder="请输入收货人手机" v-model="form.customTel" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`申请时间`">
              <a-range-picker v-model="createTime" :style="{width:'200px'}"/>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item :label="`客户期望`">
              <a-select v-model="form.customWish" placeholder="请选择客户期望" :style="{width:'200px'}">
                <a-select-option value="">
                  全部
                </a-select-option>
                <a-select-option value="01">
                  退款
                </a-select-option>
                <a-select-option value="02">
                  退货
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="searchTool">
      <a-button type="primary" @click="handleQuery">
        查询
      </a-button>
    </div>
    <a-radio-group :value="form.refundStatus" @change="handleRefundStatusChange" style="margin-top: 10px">
      <a-radio-button value="01">
        待审核
      </a-radio-button>
      <a-radio-button value="02">
        待收货
      </a-radio-button>
      <a-radio-button value="03">
        未解决
      </a-radio-button>
      <a-radio-button value="04">
        已完成
      </a-radio-button>
      <a-radio-button value="">
        全部
      </a-radio-button>
    </a-radio-group>
    <div class="searchTable">
      <a-table
        size="small"
        :rowKey="`ordNo`"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 10,total:total }"
        @change="tableChange">
        <template slot="prdInfo" slot-scope="text, record">
          <div style="width: 150px">
            <div style="width: 50px;float: left">
              <img :src="url + `/file/` + record.prd.prdImgCover " style="width:50px">
            </div>
            <div style="width: 100px;float: right;padding-left: 10px">
              <h3>{{ record.prd.prdName }}</h3>
              <h5>{{ record.prd.prdSubName }}</h5>
            </div>
          </div>
        </template>

        <template slot="customWish" slot-scope="text, record">
          <span v-if="record.customWish == '01'">退款</span>
          <span v-if="record.customWish == '02'">退货</span>
        </template>

        <template slot="refundStatus" slot-scope="text, record">
          <span v-if="record.refundStatus == '01'">待审核</span>
          <span v-if="record.refundStatus == '02'">待收货</span>
          <span v-if="record.refundStatus == '03'">未解决</span>
          <span v-if="record.refundStatus == '04'">已完成</span>
        </template>

        <template slot="actions" slot-scope="text, record">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              操作
              <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.refundStatus == '01'">
                <a href="javascript:;" @click="handleUpdOrd('02',record)">待收货</a>
              </a-menu-item>
              <a-menu-item v-if="record.refundStatus == '01' || record.refundStatus == '02'">
                <a href="javascript:;" @click="handleUpdOrd('03',record)">未解决</a>
              </a-menu-item>
              <a-menu-item v-if="record.refundStatus == '01' || record.refundStatus == '02'">
                <a href="javascript:;" @click="handleUpdOrd('04',record)">已完成</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import { queryOrd, updateOrd } from '@/api/ord'

  const columns = [
    {
      title: '订单号',
      dataIndex: 'ordNo',
      key: 'ordNo'
    },
    {
      title: '商品',
      scopedSlots: { customRender: 'prdInfo' }
    },
    {
      title: '客户姓名',
      dataIndex: 'customName',
      key: 'customName'
    },
    {
      title: '客户电话',
      dataIndex: 'customTel',
      key: 'customTel'
    },
    {
      title: '客户期望',
      scopedSlots: { customRender: 'customWish' }
    },
    {
      title: '状态',
      scopedSlots: { customRender: 'refundStatus' }
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      key: 'createTime'
    },
    {
      title: '审核时间',
      dataIndex: 'finishTime',
      key: 'finishTime'
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'actions' }
    }
  ]

  const data = []
  export default {
    // 订单管理
    name: 'Refund1',
    data () {
      return {
        url: process.env.VUE_APP_API_BASE_URL,
        form: {
          ordNo: '',
          customName: '',
          customTel: '',
          sendStatus: '01',
          refundStatus: '',
          customWish: ''
        },
        columns: columns,
        data: data,
        total: 0,
        createTime: []
      }
    },
    methods: {
      handleQuery () {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = 1
        this.form.pageSize = 10
        queryOrd(this.form).then(rsp => {
          this.total = rsp['total']
          this.data = rsp['data']
        })
      },
      tableChange (pagination) {
        if (this.createTime && this.createTime.length > 0) {
          this.form.createTime1 = this.createTime[0].format('YYYY-MM-DD HH:mm:ss')
          this.form.createTime2 = this.createTime[1].format('YYYY-MM-DD HH:mm:ss')
        }
        this.form.pageNumb = pagination.current
        queryOrd(this.form).then(rsp => {
          this.total = rsp['total']
          this.data = rsp['data']
        })
      },
      handleRefundStatusChange (e) {
        this.form.refundStatus = e.target.value
        this.handleQuery()
      },
      handleUpdOrd (refundStatus, ord) {
        ord.refundStatus = refundStatus
        updateOrd(ord).then(rsp => {
          this.handleQuery()
        })
      }
    },
    mounted () {
      this.handleQuery()
    }
  }
</script>

<style scoped>
  .searchTool {
    margin-top: 20px;
    float: right;
  }

  .searchTable {
    margin-top: 20px;
    float: left;
    width: 100%;
  }
</style>
